<!DOCTYPE HTML>
<html>

<head>
    <title>加载海量点</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style type="text/css">
        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #panel {
            position: absolute;
            top: 30px;
            left: 10px;
            z-index: 999;
            color: #fff;
        }

        #login {
            position: absolute;
            width: 300px;
            height: 40px;
            left: 50%;
            top: 50%;
            margin: -40px 0 0 -150px;
        }

        #login input[type=password] {
            width: 200px;
            height: 30px;
            padding: 3px;
            line-height: 30px;
            border: 1px solid #000;
        }

        #login input[type=submit] {
            width: 80px;
            height: 38px;
            display: inline-block;
            line-height: 38px;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=0eTGz3OflWLAWvIIOEM0eF4tSLUHMylU"></script>
    <script type="text/javascript" src="./data/points-sample-data.js"></script>
    <script type="text/javascript"
        src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript"
        src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
</head>
<style>
    .btn {
        position: absolute;
        top: 20px;
        left: 20px;
    }
</style>

<body>
    <div id="map"></div>
    <div class="btn">
        <button style="background-color: antiquewhite;" id="toggleBtn">海量点</button>
        <button style="background-color: rgb(224, 250, 117);" id="toggleBtn2">点聚合</button>
    </div>
    <script type="text/javascript">
        var map = new BMap.Map("map", {});                        // 创建Map实例
        var cp = map.getBounds() //返回map可视区域，已地理坐标表示
        var ct = cp.getCenter();
        var sw = cp.getSouthWest(); // 中心点的左上角坐标，已地理坐标表示
        var ne = cp.getNorthEast(); // 中心点的右下角坐标，已地理坐标表示
        map.centerAndZoom(new BMap.Point(105.000, 38.000), 5);     // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(); //启用滚轮放大缩小
        var isActive = true; // 初始值为 true  
        var isActive2 = true; // 初始值为 true  
        console.log(
            '中心点坐标：' +
            map.getCenter().lng,
            map.getCenter().lat,
            map.getZoom());
        console.log("四个角坐标" +
            '左下：' +
            map.getBounds().getSouthWest().lng,
            map.getBounds().getSouthWest().lat,
            '右上：' +
            map.getBounds().getNorthEast().lng,
            map.getBounds().getNorthEast().lat,
        );
        map.addEventListener("zoomend", function () {
            //地图缩放结束后执行的代码
            console.log(
                '中心点坐标：' +
                map.getCenter().lng,
                map.getCenter().lat,
                map.getZoom());
            console.log("四个角坐标");
            console.log(
                '左下：' +
                map.getBounds().getSouthWest().lng,
                map.getBounds().getSouthWest().lat,
                '右上：' +
                map.getBounds().getNorthEast().lng,
                map.getBounds().getNorthEast().lat,
            );
        });
        map.addEventListener("dragend", function () {
            //地图拖拽结束后执行的代码
            console.log(
                '中心点坐标：' +
                map.getCenter().lng,
                map.getCenter().lat,
                map.getZoom());
            console.log("四个角坐标" +
                '左下：' +
                map.getBounds().getSouthWest().lng,
                map.getBounds().getSouthWest().lat,
                '右上：' +
                map.getBounds().getNorthEast().lng,
                map.getBounds().getNorthEast().lat,
            );
        });
        document.getElementById("toggleBtn").addEventListener("click", function () {
            isActive = !isActive; // 切换布尔值  
            if (isActive) {
                map.clearOverlays(); // 将地图中的所有点清除  定义为空  描述清空地图中所有点
            } else {
                var points = [];  // 添加海量点数据
                for (var i = 0; i < data.length; i++) {
                    points.push(new BMap.Point(data[i][0], data[i][1]));
                }
                var options = {
                    size: BMAP_POINT_SIZE_SMALL,
                    shape: BMAP_POINT_SHAPE_STAR,
                    color: '#d340c3'
                }
                var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
                pointCollection.addEventListener('click', function (e) {
                    alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
                });
                map.addOverlay(pointCollection);  // 添加Overlay
            }
        });
        document.getElementById("toggleBtn2").addEventListener("click", function () {
            isActive2 = !isActive2; // 切换布尔值  
            if (isActive2) {
                map.clearOverlays(); // 将地图中的所有点清除  定义为空  描述清空地图中所有点
            } else {
                var markers = [];
                if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
                    var pt = null;
                    // var i = 0;
                    for (let i = 0; i < data.length; i++) {
                        pt = new BMap.Point(data[i][0], data[i][1]);
                        markers.push(new BMap.Marker(pt));
                    }
                    //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
                    var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });
                } else {
                    alert('请在chrome、safari、IE8+以上浏览器查看本示例');
                }
            }
        });
    </script>
</body>